<template>
  <view style="background: #f8f8f8; overflow: hidden">
    <!-- 列表类样式 -->
    <view class="list_mode">
      <view class="goods_list" v-if="dataList.length !== 0">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="goods_item"
          @tap="goGoodsDetail(item)"
        >
          <image src="@/static/logo.png" :lazy-load="true"></image>
          <!-- 商品标签 -->
          <!-- <image class="tags" :src="tagImg[item.type - 1]"></image> -->
          <view class="goods_right">
            <view class="goods_name" @tap="goGoodsDetail(item)">{{ item.title }}</view>
            <!-- <view class="numbers">
              <text v-if="item.youhui == true">优惠券</text>
              <text v-if="item.baoyou == true">包邮</text>
            </view> -->
            <view class="price">
              <text class="money">￥{{ item.money }}</text>
              <text class="hx_money">￥{{ item.hmoney }}</text>
            </view>

            <view class="goods_button">
              <text class="go_buy">抢购</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const colors = '#fa436a'
const loading = ref(false)

withDefaults(defineProps<{ dataList: Array<Record<string, any>> }>(), {
  dataList: () => [],
})

const goGoodsDetail = (e: {}) => {
  console.log('goOrderDetail')
  uni.navigateTo({ url: '/subPackages/goodsDetail/index' })
}
</script>

<style lang="scss" scoped>
/* 列表类样式 */
.list_mode {
  padding: 20rpx 4% 20rpx;
  z-index: 10;
  background-color: #ffffff;
  .goods_list {
    overflow: hidden;
    .goods_item {
      align-items: center;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 10rpx;
      margin-bottom: 15rpx;
      overflow: hidden;
      position: relative;
      &:last-of-type {
        border-bottom: none;
      }
      image {
        width: 200rpx;
        height: 200rpx;
        float: left;
        border-radius: 10rpx;
        margin-right: 5rpx;
      }
      .tags {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        top: 0;
        left: 0;
      }
      .goods_right {
        /* float: left; */
        padding: 0 10rpx;
        overflow: hidden;
        .goods_name {
          font-size: 28rpx;
          overflow: hidden;
          font-weight: bold;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #333;
          min-height: 50rpx;
        }
        .numbers {
          font-size: 20rpx;
          line-height: 30rpx;
          overflow: hidden;
          margin-top: 30rpx;
          display: flex;
          align-content: center;
          text {
            display: inline-block;
            height: 35rpx;
            line-height: 35rpx;
            padding: 0 10rpx;
            background-color: #faeff7;
            border-radius: 10rpx;
            margin-right: 20rpx;
            color: #fa436a;
          }
        }
        .price {
          line-height: 40rpx;
          font-size: 24rpx;
          overflow: hidden;
          margin-top: 20rpx;
          .money {
            margin-right: 20rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #fa436a;
          }
          .hx_money {
            text-decoration: line-through;
            color: #999;
            font-size: 22rpx;
          }
        }
        .goods_button {
          .go_buy {
            font-size: 28upx;
            padding: 10upx 40upx;
            background-color: #fa436a;
            color: #ffffff;
            border-radius: 10upx;
            float: right;
          }
        }
      }
    }
  }
}
</style>
